// Navbar Offcanvas
(function ($) {

  $('[data-target="#main-menu"]').on('click', function () {
    $(this).attr('aria-expanded', 'true');
    $('body').toggleClass('open');
    $('#main-menu.offcanvas-collapse').toggleClass('open');
    setTimeout(function () {
      $('.parent-link:first').focus();
    }, 200);
  });

  $('.nav-close').on("focusin", function() { 
    $(this).attr('aria-label', 'close button');
    $(this).attr('aria-hidden', 'false');
  });

  $('.nav-close').on("focusout", function() { 
    $(this).attr('aria-label', '');
    $(this).attr('aria-hidden', 'true');
  });

  $('[data-target="#account"]').on('click', function () {
    $(this).attr('aria-expanded', 'true');
    $('body').toggleClass('open');
    $('#account.offcanvas-collapse').toggleClass('open');
    setTimeout(function () {
      $('#account .nav-item:first a').focus();
    }, 200);
  });

  $('.nav-back').on('click', function () {
    $(this).closest('.offcanvas-collapse.open').removeClass('open');
    $('.nav-body-scroll').removeClass('active');
    $('.nav-submenu.offcanvas-collapse').attr('aria-hidden', 'true');
    $('.parent-link[data-toggle="offcanvas"]').attr('aria-expanded', 'false');
  });

  $('#main-menu .nav-close').on('click', function () {
    $(this).closest('.offcanvas-collapse').removeClass('open');
    $('[data-target="#main-menu"]').focus();
    $('.nav-back').closest('.offcanvas-collapse.open').removeClass('open');
    $('.offcanvas-collapse').attr('aria-hidden', 'true');
    $('[data-toggle="offcanvas"]').attr('aria-expanded', 'false');
    $('body').removeClass('open');
    $('body').removeAttr('tabindex');
  });

  $('#account .nav-close').on('click', function () {
    $(this).closest('.offcanvas-collapse').removeClass('open');
    $('[data-target="#account"]').focus();
    $('.nav-back').closest('.offcanvas-collapse.open').removeClass('open');
    $('.offcanvas-collapse').attr('aria-hidden', 'true');
    $('[data-toggle="offcanvas"]').attr('aria-expanded', 'false');
    $('body').removeClass('open');
    $('body').removeAttr('tabindex');
  });


  // Close Menu with Esc Key
  $('.offcanvas-collapse').on('keyup', function (e) {
    if (e.keyCode === 27) {
      $('.offcanvas-collapse.open').removeClass('open');
    }
  });

  // Nav Focus Trap
  var navtrap = function (elem) {
    var tabbable = elem.find('button, a').filter(':visible');
    var firstTabbable = tabbable.first();
    var lastTabbable = tabbable.last();

    // Set Focus on First Link
    // firstTabbable.focus();

    /*redirect last tab to first input*/
    lastTabbable.on('keydown', function (e) {
      if (e.which === 9 && !e.shiftKey) {
        e.preventDefault();
        firstTabbable.focus();
      }
    });

    /*redirect first shift+tab to last input*/
    firstTabbable.on('keydown', function (e) {
      if (e.which === 9 && e.shiftKey) {
        e.preventDefault();
        lastTabbable.focus();
      }
    });
  };

  $('[data-toggle="offcanvas"]').on('click', function () {
    $('body').attr('tabindex', '-1');

    if ($('.navbar-collapse.offcanvas-collapse').hasClass('open')) {
      $('.navbar-collapse.offcanvas-collapse.open').attr('aria-hidden', 'false');

      navtrap($('#account'));
      navtrap($('#main-menu'));
    }
  });


  $('.parent-link[data-toggle="offcanvas"]').on('click', function () {
    $(this).attr('aria-expanded', 'true');
    $(this).next('.offcanvas-collapse').toggleClass('open');
    setTimeout(function () {
      $('.nav-back').focus();
    }, 200);

    if ($('.nav-submenu.offcanvas-collapse').hasClass('open')) {
      $('.nav-submenu.offcanvas-collapse.open').attr('aria-hidden', 'false');
      $('.nav-submenu.offcanvas-collapse.open .nav-body-scroll').toggleClass('active');

      navtrap($('.nav-body-scroll.active'));
    }
  });



})(jQuery);

// Sitecore Nav Function Code
// (function ($) {
//   'use strict';
//   $('[data-target="#main-menu"]').on('click', function () {
//       if ($('#main-menu.offcanvas-collapse').hasClass("open")) {
//           $(this).removeClass("open");
//       } else {
//           $(this).addClass("open");
//       }
//       $('body').addClass('open');
//   });
//   $('[data-target="#account"]').on('click', function () {
//       if ($('#account.offcanvas-collapse').hasClass("open")) {
//           $(this).removeClass("open");
//       } else {
//           $(this).addClass("open");
//       }
//       //$('#account.offcanvas-collapse').toggleClass('open');
//   });
//   $('.nav-item [data-toggle="offcanvas"]').on('click', function () {
//       if ($(this).hasClass("open")) {
//           $(this).removeClass("open");
//       } else {
//           $(this).addClass("open");
//       }
//       //$(this).next('.offcanvas-collapse').toggleClass('open');
//   });
//   $('.nav-back').on('click', function () {
//       var parent = $('.nav-submenu.offcanvas-collaps.open');
//       parent.removeClass('open');
//   });
//   $('.nav-close').on('click', function () {
//       $(this).closest('.offcanvas-collapse').removeClass('open');
//       $('.nav-back').closest('.offcanvas-collapse.open').removeClass('open');
//       $('body').removeClass('open');
//   });
// })(jQuery);